<script setup lang="ts">
import { ref } from 'vue'
import type { previewImgType, colsType, rowsType } from './type'

const imgList = ref<previewImgType[]>([
  { id: '1', path: './images/comp/address/1.png' },
  { id: '2', path: './images/comp/address/2.png' }
])

const apiCols: colsType[] = [
  { title: '参数', dataIndex: 'param', width: 200 },
  { title: '类型', dataIndex: 'type', width: 150 },
  { title: '默认值', dataIndex: 'default', width: 100 },
  { title: '必填', dataIndex: 'required', width: 100 },
  { title: '说明', dataIndex: 'statement', ellipsis: true }
]

const apiRows: rowsType[] = [
  {
    key: '1',
    param: 'params',
    type: 'Object',
    default: '{}',
    required: '是',
    statement: '已选择的区域Object，见下面params参数说明'
  },
  {
    key: '2',
    param: 'change',
    type: 'function',
    default: '',
    required: '是',
    statement: '提供给外部选择区域后的回调函数'
  }
]

const paramsRows: rowsType[] = [
  {
    key: '1',
    param: 'visible',
    type: 'Boolean',
    default: 'false',
    required: '是',
    statement: '是否可见'
  },
  {
    key: '2',
    param: 'provinceName',
    type: 'String',
    default: '',
    required: '是',
    statement: '省份'
  },
  {
    key: '2',
    param: 'cityName',
    type: 'String',
    default: '',
    required: '是',
    statement: '城市'
  },
  {
    key: '3',
    param: 'townName',
    type: 'String',
    default: '',
    required: '是',
    statement: '区域'
  }
]
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1、组件简介</div>
        <div class="doc-text">
          <div class="text">1.1 所属项目 - 会员小程序</div>
        </div>
        <div class="doc-text">
          <div class="text">1.2 路径 - /components/address-picker/addressPicker.vue</div>
        </div>
        <div class="doc-text">
          <div class="text">1.3 功能 - 选择所在区域</div>
        </div>
        <div class="doc-text">
          <div class="text">1.4 组件预览</div>
          <div class="image flex-h-sc">
            <a-image-preview-group>
              <div class="img" v-for="(item, inx) in imgList" :key="item.id">
                <a-image class="img" :width="100" :src="item.path" />
              </div>
            </a-image-preview-group>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2、使用方法</div>
        <div class="doc-text">
          <div class="text">
            <pre><code class="vue">&lt;address-picker :params="addrData" @change="addrChange"&gt;&lt;/address-picker&gt;</code></pre>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">3、API</div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="apiCols"
              :data-source="apiRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-text">
          <div class="text">params参数说明:</div>
        </div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="apiCols"
              :data-source="paramsRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text,
    .doc-tab {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .tab {
        margin-bottom: 10px;
      }
      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
      .image {
        @include size(100%, 100%);
        .img {
          max-width: 150px;
          margin-right: 20px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
